<template>
  <el-dialog
    ref="dialog"
    v-dialogDrag
    title="资源分配"
    :close-on-click-modal="isDisabled"
    :visible="isVisible"
    @close="handleClose"
    @closed="handleClosed"
  >
    <div
      class="container"
    >
      <el-tree
        ref="treeRef"
        v-loading="isLoading"
        :data="tree"
        :default-checked-keys="checkedIdArray"
        node-key="id"
        show-checkbox
      >
      </el-tree>
    </div>
    <div
      v-if="!isDisabled"
      slot="footer"
    >
      <el-button
        @click="handleClose"
      >
        取 消
      </el-button>
      <el-button
        type="primary"
        :loading="isLoading"
        @click="handleSubmit"
      >
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
let dataMap = null
/**
 * @typedef {{
 *   'id': String,
 *   'parentId': String,
 *   'resourceType': Number,
 * }} Data
 */
/**
 * # 资源分配器
 * 用于查看或分配所选角色的资源
 */
export default {
  'name': 'ResourceAllocator',

  'props': {
    /**
     * 被勾选的资源的`id`属性值组成的数组
     * @type {String[]}
     */
    'checkedIdArray': {
      'default' () {
        return []
      },
      'type': Array,
    },
    /**
     * 设置`资源分配器`中的树是否为不可用状态
     * @type {Boolean}
     */
    'isDisabled': {
      'default': false,
      'type': Boolean,
    },
    /**
     * 设置`资源分配器`是否为加载状态
     * @type {Boolean}
     */
    'isLoading': {
      'default': false,
      'type': Boolean,
    },
    /**
     * 设置`资源分配器`是否为显示状态
     * @type {Boolean}
     */
    'isVisible': {
      'default': false,
      'type': Boolean,
    },
    /**
     * 所有资源
     * @type {Data[]}
     */
    'totalDataArray': {
      'default' () {
        return []
      },
      'type': Array,
    },
  },

  'data' () {
    return {
      /**
       * 树形结构的数据
       *
       * 用于展示
       * @typedef {{
       *   'children': TreeNode[],
       *   'disabled': true,
       *   'id': String,
       *   'label': String,
       * }} TreeNode
       * @type {TreeNode[]}
       */
      'tree': [],
    }
  },

  'methods': {
    /**
     * 处理`资源分配器`的对话框的关闭事件
     */
    'handleClose' () {
      this.$emit('update:isVisible', false)
    },
    /**
     * 处理`资源分配器`的对话框的关闭动画结束事件
     */
    'handleClosed' () {
      dataMap = null
      this.tree = []
      this.$nextTick(() => {
        this.$refs.treeRef.setCheckedKeys([])
      })
    },
    /**
     * 处理`资源分配器`的确定按钮点击事件
     */
    'handleSubmit' () {
      this.$nextTick(() => {
        this.$emit('submit', this.$refs.treeRef.getCheckedKeys())
      })
    },
    /**
     * 设置树形结构的数据
     */
    'setTree' () {
      dataMap = this.totalDataArray.reduce((previousMap, data) => {
        if (data.resourceType !== 2 && data.parentId === '-1') {
          return previousMap
        }
        previousMap.set(data.id, {
          'children': [],
          'disabled': this.isDisabled,
          'id': data.id,
          'label': data.name,
        })
        return previousMap
      }, new Map())
      this.tree = []
      for (const data of this.totalDataArray) {
        const mapData = dataMap.get(data.id)
        if (data.resourceType === 2) {
          this.tree.push(mapData)
          continue
        }
        const parent = dataMap.get(data.parentId)
        if (!parent) {
          continue
        }
        parent.children.push(mapData)
      }
    },
  },
}
</script>

  <style scoped lang="scss">
  .container {
    max-height: 500px;
    overflow-y: auto;
  }
  </style>

